<template>
    <div class="box3">
        <ul>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"
                    alt="">
                <p>京东超市</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png"
                    alt="">
                <p>数码电器</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png"
                    alt="">
                <p>京东新百货</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png"
                    alt="">
                <p>京东生鲜</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png"
                    alt="">
                <p>京东到家</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png"
                    alt="">
                <p>充值缴费</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png"
                    alt="">
                <p>附近好店</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png"
                    alt="">
                <p>领卷</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png"
                    alt="">
                <p>PLUS会员</p>
            </li>
            <li> <img
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png"
                    alt="">
                <p>京东国际</p>
            </li>
        </ul>
        <div class="origin">
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

</template>

<script>
export default {
    name: 'Brand',

}
</script>

<style lang="less">
.box3 {
    width: 96vw;
    height: 340px;
    margin: 10px;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        li {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 18vw;
            height: 160px;

            p {
                font-size: 15px;
            }

            img {
                width: 80px;
                height: 80px;
            }
        }
    }

    .origin {
        height: 60px;
        margin: 10px 0;
        ul {
            width: 70px;
            margin: 0 auto;
            li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: #ccc;
                margin:0  10px;
            }
            li:first-child{
                background-color:red;
            }
        }
    }
}
</style>